import React,{PureComponent} from 'react'
import {View,Image,StyleSheet,TouchableOpacity,Text,Dimensions,Button,Platform} from 'react-native'
import Separator from '../Separator'


type Props = {
    callbackBoMing:Function,
    detail:Object,
    // info:Object,
}

export default class DetailfreeBottom extends PureComponent<Props>{
    render(){
        let detail = this.props.detail
        return (
            <View>
                <Separator/>
                <View style={style.container}>
                    <View style={{flexDirection:'row',alignItems:'flex-end'}}>
                        <Text style={{color:'rgb(219,56,67)',fontSize:30,fontWeight:'bold'}}>免费</Text>
                        {this.renderIsBuys()}
                        <View style={{flex:1}}/>
                        {this.renderBottom()}
                    </View>
                </View>
            </View>

        )
    }
    renderIsBuys(){
        // let info = this.props.info
        let detail = this.props.detail

        if(detail.buy_num >= detail.totals){
            return  <View/>
        }else {
            return <Text style={{color:'rgba(0,0,0,0.5)',fontSize:12,fontWeight:'200',marginLeft:18}}>已有{detail.buy_num}人报名</Text>
        }
    }
    renderBottom(){
        // let info = this.props.info

        let detail = this.props.detail


        if (detail.is_buy > 0){
            return <View style={style.yi_bao_ming} >
                <Text style={{fontWeight:'bold',fontSize:16,color:'white'}}>已报名</Text>
            </View>
        }else if(detail.buy_num >= detail.totals){
            return <View style={style.yi_bao_ming} >
                <Text style={{fontWeight:'bold',fontSize:16,color:'white'}}>已报满</Text>
            </View>
        }else {
            return <TouchableOpacity style={style.bao_ming} onPress={()=>{this.props.callbackBoMing()}}>
                <Text style={{fontWeight:'bold',fontSize:16,color:'white'}}>立即报名</Text>
            </TouchableOpacity>
        }
    }
}

const style = StyleSheet.create({

    container:{
      height:62,
        backgroundColor:'white',
        paddingTop:11,
        paddingBottom:11,
        paddingLeft:12,
        paddingRight:12,

    },
    bao_ming:{
        backgroundColor:'rgb(219,56,67)',
        borderRadius:20,
        width:120,
        height:40,
        marginLeft:22,
        justifyContent:'center',
        alignItems:'center',
    },
    yi_bao_ming:{
        backgroundColor:'#cecece',
        borderRadius:20,
        width:120,
        height:40,
        marginLeft:22,
        justifyContent:'center',
        alignItems:'center',
    },
})